<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<!--
* Copyright 2010-2011 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->

<div data-bb-type="screen" data-bb-effect="slide-left">
	<div id="foo" data-bb-type="title" data-bb-caption="Edit Contact" data-bb-back-caption="Cancel" data-bb-action-caption="Save" onactionclick="alert('Save Clicked')"></div>
	
	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Dropdown Buttons</div>
		<div data-bb-type="label-control-container">
			<div data-bb-type="row">
			   <div data-bb-type="label">Sample Dropdown</div>
			   <select data-bb-label="Font Family">
					<option value="bbalphasans" selected="true">Slate</option>
					<option value="arial">Arial</option>
					<option value="andalemono">Andale Mono</option>
					<option value="arial">Arial</option>
					<option value="andalemono">Andale Mono 1</option>
					<option value="arial">Arial</option>
					<option value="andalemono">Andale Mono 2</option>
					<option value="arial">Arial</option>
					<option value="andalemono">Andale Mono 3</option>
					<option value="arial">Arial</option>
					<option value="andalemono">Andale Mono 4</option>
			   </select>
		   </div>
		</div>
	</div>
	
	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Buttons</div>
		<div data-bb-type="label-control-container">
			<div data-bb-type="row">
			   <div data-bb-type="label">This is a button</div>
			   <div data-bb-type="button" data-bb-style="stretch" onclick="document.getElementById('foo').setActionCaption('foo');">Change Save</div>
		   </div>
		   <div data-bb-type="row">
			   <div data-bb-type="label">BB10 button with image + text</div>
			   <div data-bb-type="button" data-bb-img="images/actionBar/cog_dark_theme.png">My Button</div>
		   </div>
		</div>
	</div>
	
	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">BB10 image only button</div>
		<div>
			<div data-bb-type="button" data-bb-img="images/actionBar/cog_dark_theme.png"></div>
		</div>
	</div>
	
	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Text Entry Examples</div>
		<div data-bb-type="label-control-container">
			<div data-bb-type="row">
			   <div data-bb-type="label">Sample Text</div>
			   <input type="text" value="This is long text to test the clear button overlap" />
		   </div>
		   <div data-bb-type="row">
			   <div data-bb-type="label">Sample Placeholder text</div>
			   <input type="text" value="" placeholder="My Placeholder Text" disabled="true"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">Password</div>
			   <input type="password"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">Telephone</div>
			   <input type="tel"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">Url</div>
			   <input type="url"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">File</div>
			   <input id="hi" type="file"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">email</div>
			   <input type="email"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">Number</div>
			   <input type="number"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">Date</div>
			   <input type="date"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">Time</div>
			   <input type="time"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">DateTime</div>
			   <input type="datetime"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">month</div>
			   <input type="month"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">DateTime Local</div>
			   <input type="datetime-local"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">Color</div>
			   <input type="color"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">Search</div>
			   <input type="search"/>
			</div>
			<div data-bb-type="row">
			   <div data-bb-type="label">Text Area</div>
			   <textarea rows="4"></textarea>
			</div>
		</div>
	</div>
	<div data-bb-type="action-bar">
		<div data-bb-type="action" data-bb-style="button" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="alert('Add a Field');">Add Field</div>
	</div>
</div>

